<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <link rel="stylesheet" href="/public/static/css/frozen.css">
        <link rel="stylesheet" type="text/css" href="/public/static/css/cai.css" />
        <script src="/public/static/js/flexible_css.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/static/js/flexible.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="conbody">
            <footer class="ui-footer ui-footer-btn">
                <ul class="ui-tiled ui-border-t">
                    <li data-href="/public/static/index.html" class="ui-border-r"><div><img src="/public/static/img/menu1on.png"></div><i class="choose">首页</i></li>
                    <li data-href="/public/static/index.html" class="ui-border-r"><div><img src="/public/static/img/menu2off.png"></div><i>规则</i></li>
                    <li data-href="/public/static/index.html" class="ui-border-r"><div><img src="/public/static/img/menu3off.png"></div><i>榜单</i></li>
                    <li data-href="/public/static/index.html" class="ui-border-r"><div><img src="/public/static/img/menu4off.png"></div><i>推广</i></li>
                    <li data-href="/public/static/index.html" class="ui-border-r"><div><img src="/public/static/img/menu5off.png"></div><i>我的</i></li>
                </ul>
            </footer>
            <!--顶部信息-->
            <div class="topdata ui-flex ui-flex-align-center">
                <div class="bcount">99999</div>
                <div class="paybtn"><img src="/public/static/img/paybtn.png"></div>
                <div class="prizecount">99999</div>	
            </div>
            <div class="clear"></div>
            <!--广告信息-->
            <section class="ui-container">
                <section id="tab">
                    <div class="demo-item">
                        <div class="demo-block">
                            <div class="ui-tab">
                                <ul class="ui-tab-nav ui-border-b">
                                    <li class="current">基础竞猜</li>
                                    <li>连环竞猜(倍数高)</li>
                                </ul>
                                <ul class="ui-tab-content" style="width:300%">
                                    <li>
                                        <div class="choosebuy"><a>请选择要购买的类型(基础赔率1:0.9)</a></div>
                                        <div class="guestlist">
                                            <ul class="ui-justify ui-whitespace">
                                                <li><div class="guestitem">猜 大</div></li>
                                                <li><div class="guestitem">猜 小</div></li>
                                                <li><div class="guestitem">猜 单</div></li>
                                                <li><div class="guestitem">猜 双</div></li>
                                            </ul>
                                        </div>
                                        <div class="buytips"><a class="ui-txt-warning">大数的数字范围为51-99</a></div>
                                        <div class="buycount">请选择购买注数(1注=100竞猜币)</div>
                                        <div class="ui-btn-group">
                                            <button class="ui-btn-lg ui-btn-primary">-</button>
                                            <input type="text" placeholder="购买注数">
                                            <button class="ui-btn-lg ui-btn-primary">+</button>
                                        </div>
                                        <div class="buytotal">总计花费<a class="ui-txt-warning">20000币</a></div>
                                        <div class="buytotal">当前倍率<a class="ui-txt-warning">9900倍</a> 猜中可得<a class="ui-txt-warning">20000币</a></div>
                                        <div class="ui-btn-wrap">
                                            <button class="ui-btn-lg ui-btn-primary">
                                                支付0.01看订单尾数
                                            </button>
                                        </div>
                                    </li>
                                    <!--第二页-->
                                    <li>
                                        <div class="choosebuy"><a>同时猜大小和单双倍率高</a></div>
                                        <div class="guestlist1">
                                            <ul class="ui-list ui-list-text ui-border-tb">
                                                <li class="ui-border-t">
                                                    <div class="ui-list-info">
                                                        <h4>尾数为大数</h4><a><h6>末尾两位数大于51</h6></a>
                                                    </div>
                                                    <label class="ui-switch">
                                                        <input type="checkbox">
                                                    </label>
                                                </li>
                                                <li class="ui-border-t">
                                                    <div class="ui-list-info">
                                                        <h4>尾数为小数</h4><a><h6>末尾两位数小于51</h6></a>
                                                    </div>
                                                    <label class="ui-switch">
                                                        <input type="checkbox">
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="guestlist1">
                                            <ul class="ui-list ui-list-text ui-border-tb">
                                                <li class="ui-border-t">
                                                    <div class="ui-list-info">
                                                        <h4>尾数为单数</h4><a><h6>最后一位数为奇数</h6></a>
                                                    </div>
                                                    <label class="ui-switch">
                                                        <input type="checkbox">
                                                    </label>
                                                </li>
                                                <li class="ui-border-t">
                                                    <div class="ui-list-info">
                                                        <h4>尾数为双数</h4><a><h6>最后一位数为偶数</h6></a>
                                                    </div>
                                                    <label class="ui-switch">
                                                        <input type="checkbox">
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="ui-btn-group">
                                            <button class="ui-btn-lg ui-btn-primary">-</button>
                                            <input type="text" placeholder="购买注数">
                                            <button class="ui-btn-lg ui-btn-primary">+</button>
                                        </div>
                                        <div class="buytotal">总计花费<a class="ui-txt-warning">20000币</a></div>
                                        <div class="buytotal">当前倍率<a class="ui-txt-warning">9900倍</a> 猜中可得<a class="ui-txt-warning">20000币</a></div>
                                        <div class="ui-btn-wrap">
                                            <button class="ui-btn-lg ui-btn-primary">
                                                支付0.01看订单尾数
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
        </div>
        <script src="/public/static/lib/zepto.min.js"></script>
        <script src="/public/static/js/frozen.js"></script>
        <script>
            (function () {
                var tab = new fz.Scroll('.ui-tab', {
                    role: 'tab',
                    autoplay: false,
                    interval: 3000
                });
                /* 滑动开始前 */
                tab.on('beforeScrollStart', function (fromIndex, toIndex) {
                    console.log(fromIndex, toIndex);// from 为当前页，to 为下一页
                })
            })();
        </script>
    </body>
</html>